<template>
    <el-form :model="ruleForm" ref="ruleForm" label-width="80px">
        <el-form-item :label="$t('m.label.date')" prop="time">
            <el-date-picker
                v-model="time"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                :placeholder="$t('m.placeholder.selectDate')"
                :picker-options="pickerOptions"
                :clearable="false"
                @change="getTimePoints"
                size="small"
            ></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('m.label.time')" prop="timestamp">
            <i class="el-icon-loading" v-if="loading"></i>
            <el-select
                v-model="ruleForm.timestamp"
                multiple
                filterable
                collapse-tags
                :placeholder="$t('m.placeholder.selectTimePoint')"
                size="small"
            >
                <el-option
                    v-for="(item,index) in arrData.findByTime"
                    :key="index"
                    :label="item | formatDate"
                    :value="item | formatDate"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.label.country')" prop="countryIds">
            <el-select
                v-model="ruleForm.countryIds"
                multiple
                filterable
                collapse-tags
                :placeholder="$t('m.placeholder.selectCountry')"
                @change="getFindWarehouse"
                size="small"
            >
                <allAddDelSelect
                    :selectForm="ruleForm"
                    :selectArray="arrData.allCountry"
                    selectFormId="countryIds"
                    selectArrayId="countryId"
                    size="mini"
                    @selectAll="getFindWarehouse"
                    @selectDel="getFindWarehouse"
                ></allAddDelSelect>
                <el-option
                    v-for="item in arrData.allCountry"
                    :key="item.countryId"
                    :label="item.countryName"
                    :value="item.countryId"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.label.warehouse')" prop="warehouseIds">
            <el-select
                v-model="ruleForm.warehouseIds"
                filterable
                multiple
                collapse-tags
                :placeholder="$t('m.placeholder.selectWarehouse')"
                size="small"
            >
                <allAddDelSelect
                    :selectForm="ruleForm"
                    :selectArray="arrData.findWarehouse"
                    selectFormId="warehouseIds"
                    selectArrayId="warehouseId"
                    size="mini"
                ></allAddDelSelect>
                <el-option
                    v-for="item in arrData.findWarehouse"
                    :key="item.warehouseId"
                    :label="item.warehouseName"
                    :value="item.warehouseId"
                ></el-option>
            </el-select>
        </el-form-item>
        <div>
            <el-form-item :label="$t('m.label.BU')" prop="buIds">
                <BU
                    :form="ruleForm"
                    formId="buIds"
                    :multiple="true"
                    addSize="mini"
                    @selectAll="getCategory"
                    @selectDel="getCategory"
                    size="small"
                ></BU>
            </el-form-item>
            <el-form-item :label="$t('m.label.productCategory')" prop="categoryIds">
                <category
                    ref="category"
                    :form="ruleForm"
                    formId="categoryIds"
                    formBU="buIds"
                    :multiple="true"
                    @selectAll="getProduct"
                    @selectDel="getProduct"
                    addSize="mini"
                    size="small"
                ></category>
            </el-form-item>
            <el-form-item :label="$t('m.label.productModelNumber')" prop="productCodes">
                <product
                    ref="product"
                    formId="productCodes"
                    formBU="buIds"
                    formCategory="categoryIds"
                    :form="ruleForm"
                    :multiple="true"
                    @selectAll="getReverse"
                    @selectDel="getReverse"
                    addSize="mini"
                    size="small"
                ></product>
            </el-form-item>
            <el-button type="primary" @click="submitForm" icon="el-icon-search" size="small">{{$t('m.button.search')}}</el-button>
            <el-button @click="resetForm('ruleForm')" icon="el-icon-circle-close" size="small">{{$t('m.button.reset')}}</el-button>
            <download ref="download" :allColumns="column" :title="$t('m.excel.winit')" @getDataxlsx="getDataxlsx" size="small"></download>
        </div>
    </el-form>
</template>
<script>
const ERR_OK = 200;
import { getWinitTable } from "./http";
import { formatDate } from "assets/js/date";
import { BU, category, product } from "components/searchfor";
export default {
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        }
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        }
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        }
                    }
                ]
            },
            time: "",
            loading: false,
            ruleForm: {
                buIds: [],
                categoryIds: [],
                countryIds: [],
                productCodes: [],
                timestamp: [],
                warehouseIds: []
            },
            arrData: {
                findByTime: [],
                allCountry: [],
                findWarehouse: []
            },
            column: [],
            products: [],
            downloadForm: {}
        };
    },
    filters: {
        formatDate(time) {
            let date = new Date(time);
            return formatDate(date, "yyyy-MM-dd hh:mm:ss");
        }
    },
    created() {
        this.getFindCountry();
    },
    methods: {
        getColumns(val) {
            this.column = val;
        },
        getCategory() {
            this.$refs.category.getCategory();
            this.$refs.product.getProduct();
        },
        getProduct() {
            this.$refs.category.getCategory(true);
            this.$refs.product.getProduct();
        },
        getReverse(array) {
            this.$refs.product.getProduct(true);
            this.products = array;
        },
        // 获取时间
        getTimePoints(time) {
            this.loading = true;
            this.ruleForm.timestamp = [];
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.thirdPartInventory +
                    "/winitSearch/findByTime?timestamp=" +
                    time
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.arrData.findByTime = res.data.data.data;
                }
                this.loading = false;
            });
        },
        // 获取国家
        getFindCountry() {
            this.$ajax
                .post(
                    this.GLOBAL.thirdPartInventory +
                        "/winitSearch/findCountry"
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.arrData.allCountry = res.data.data.data;
                    }
                });
        },
        // 获取仓库
        getFindWarehouse() {
            this.$ajax
                .post(
                    this.GLOBAL.thirdPartInventory +
                        "/winitSearch/findWarehouseByCountry?countryIds=" +
                        this.ruleForm.countryIds.join()
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.arrData.findWarehouse = res.data.data.data;
                        if (this.arrData.findWarehouse) {
                            this.ruleForm.warehouseIds = this.ruleForm.warehouseIds.filter(
                                item =>
                                    !this.arrData.findWarehouse.every(
                                        ele => ele.warehouseId !== item
                                    )
                            );
                        } else {
                            this.ruleForm.warehouseIds = [];
                        }
                    }
                });
        },
        // 提交查询
        submitForm() {
            let ruleForm = JSON.parse(JSON.stringify(this.ruleForm));
            ruleForm.productCodes = this.products
                .filter(
                    item =>
                        !ruleForm.productCodes.every(
                            el => item.productId !== el
                        )
                )
                .map(item => item.productModelNumber);
            this.$emit("submitForm", ruleForm);
            this.downloadForm = ruleForm;
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.getCategory();
        },
        getDataxlsx() {
            getWinitTable(this.downloadForm).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$refs.download.getDataXlsx(res.data.data.data);
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        }
    },
    components: {
        BU,
        category,
        product,
        download: resolve => require(["components/xlsx/xlsx.vue"], resolve),
        allAddDelSelect: resolve =>
            require(["components/searchfor/allAddDelSelect.vue"], resolve)
    }
};
</script>
<style lang="stylus" scoped>
.el-form{
    .el-form-item {
        display: inline-block;
        margin-bottom 0;
        .el-select{
            max-width 180px
        }
    }
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 180px;
}

.el-button {
    margin-left: 10px;
}
</style>
